<template>
  <div>
    <div class="content-header">
      <h1>
        预约管理
        <small>预约设置</small>
      </h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>预约管理</el-breadcrumb-item>
        <el-breadcrumb-item>预约设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="app-container">
      <div class="box">
        <div class="ordersetting">
          <el-card class="box-card">
            <div class="boxMain">
              <el-button
                style="margin-bottom: 20px; margin-right: 20px"
                type="primary"
                @click="downloadTemplate"
                >模板下载</el-button
              >
              <el-upload
                action="api/ordersetting/importOrderSettings"
                name="excelFile"
                :before-upload="beforeAvatarUpload"
                :on-success="handleSuccess"
                :show-file-list="false"
              >
                <el-button type="primary">上传文件</el-button>
              </el-upload>
            </div>
            <div>
              操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据
              <span style="color: red">(日期格式为：yyyy/MM/dd)</span
              >后点击"上传文件"按钮上传模板文件。
            </div>
          </el-card>
          <el-calendar v-model="curday">
            <template slot="dateCell" slot-scope="{ date, data }">
              <!--当前日存在-->
              <div v-if="settingData[data.day]">
                <!--当前日预约人数已满-->
                <div
                  v-if="
                    settingData[data.day].number ==
                    settingData[data.day].reservations
                  "
                  style="background-color: red; height: 85px"
                >
                  <div>
                    <font color="blue">{{ data.day }}</font>
                  </div>
                  <div>
                    {{ settingData[data.day].reservations }}/{{
                      settingData[data.day].number
                    }}
                  </div>
                  <div>已满</div>
                </div>
                <!--当前日预约人数未满-->
                <div v-else style="background-color: lightblue; height: 85px">
                  <div v-if="date < curdate">
                    <div>
                      <font color="blue">{{ data.day }}</font>
                    </div>
                    <div>
                      {{ settingData[data.day].reservations }}/{{
                        settingData[data.day].number
                      }}
                    </div>
                  </div>
                  <div v-else>
                    <div>
                      <font color="blue">{{ data.day }}</font>
                    </div>
                    <div>
                      {{ settingData[data.day].reservations }}/{{
                        settingData[data.day].number
                      }}
                      <div>
                        <button @click="goSetting(data.day)">
                          <i class="el-icon-setting"></i>设置
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--当前日不存在-->
              <div v-else>
                <!-- <div
                  v-if="data.type == 'current-month'"
                  style="padding-top: 25px"
                >
                  <font color="blue">{{ data.day }}</font>
                  <button @click="goSetting(data.day)">
                    <i class="el-icon-setting"></i>设置
                  </button>
                </div>
                <div
                  v-else
                  style="background-color:rgb(192,196,204);height:85px;width100%;"
                ></div> -->
                <div
                  style="background-color:rgb(192,196,204);height:85px;width100%;"
                ></div>
              </div>
            </template>
          </el-calendar>
        </div>
      </div>
    </div>
    <!--预约设置弹窗-->
    <el-dialog
      title="预约设置"
      :visible.sync="settingDialog"
      width="30%"
      top="15%"
    >
      <div>日期:{{ settingDay }}</div>
      <el-input v-model="number" placeholder="输入预约总人数"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="settingDialog = false">取消</el-button>
        <el-button type="primary" @click="handleUpdate">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curday: new Date(), //当前日期
      curdate: new Date(),
      settingData: {}, //当前月中，每日预约设置信息
      settingDay: "",
      settingDialog: false, //设置弹框
      number: "", //每日最大预约数
    };
  },
  created() {
    //页面初始化获取当前的年月日
    this.findSettingData(this.curday.getFullYear(), this.curday.getMonth() + 1);
  },
  watch: {
    //  监听 当前 日期的变化  curday   只要curday值发生变化  函数function 就会触发
    curday: function (oldDate, newDate) {
      //判断如果日期变化后，不是相同月份就触发后台数据加载
      if (oldDate.getMonth() != newDate.getMonth()) {
        //获取后台指定月份对应得数据
        this.loadData();
      }
    },
  },
  methods: {
    show(date) {
      alert(date);
    },
    //文件上传前校验，判断是否为excel文件
    beforeAvatarUpload(file) {
      const isXlsx =
        file.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      if (!isXlsx) {
        this.$message.error("必须上传xlsx文件");
      }
      return isXlsx; //   返回值决定 文件是否上传 action 如果 true  自动向action发送文件上传请求
    },
    //上传成功提示
    handleSuccess(res, file) {
      if (res.flag) {
        this.$message({
          message: "文件上传成功",
          type: "success",
        });
      } else {
        this.$message.error("文件上传失败");
      }
    },
    //模板文件下载
    downloadTemplate() {
      //window.open(url,target)
      //target:-blank新窗口  -parent本窗口  -self替换当前页面
      window.open("api/template/ordersetting_template.xlsx", "_parent");
    },
    //月份切换加载数据
    loadData() {
      //后台数据加载
      //   this.curday  双向绑定  当前最新的日期
      console.log("最新日期", this.curday);
      this.findSettingData(
        this.curday.getFullYear(),
        this.curday.getMonth() + 1
      );
    },
    //后台获取预约设置数据
    findSettingData(year, month) {
      this.$http
        .get("api/ordersetting/findSettingData/" + year + "/" + month)
        .then((res) => {
          if (res.data.flag) {
            this.settingData = res.data.data;
          } else {
            this.$message.error("查询预约设置信息失败");
          }
        });
    },
    goSetting(day) {
      this.settingDay = day;
      this.settingDialog = true;
    },
    //   点击设置按钮 提交数据到后台更新当前日期预约数据
    handleUpdate() {
      //   正则表达式  提交数据，对数据进行合法校验
      var reg = /^[0-9]*[1-9][0-9]*$/; // 创建一个正则表达式对象
      var flag = reg.test(this.number); //  test方法 进行 数据合法校验
      if (flag) {
        //  判断用户输入值 是否 大于 已经预约数     如果输入数值 小于  已经预约数据  不需要访问后台
        if (this.number < this.settingData[this.settingDay].reservations) {
          this.$message.warning("输入数据必须>已经预约数据！");
          return;
        }
        //   合法 提交数据给后台   修改数据库 。。 按照指定的日期 修改最大预约数
        this.$http
          .put(
            "api/ordersetting/updateNumberByOrderdate/" +
              this.number +
              "/" +
              this.settingDay
          )
          .then((res) => {
            if (res.data.flag) {
              // 修改成功之后，不用再查询数据库  使用前端js更新  settingData对象中指定数据即可
              this.settingData[this.settingDay].number = this.number;
              this.settingDialog = false;
              this.$message.success("修改成功");
            } else {
              this.$message.error("修改失败");
            }
          });
      } else {
        this.$message.warning("数据非法!");
      }
    },
  },
};
</script>

<style scoped>
.el-calendar-table .el-calendar-day {
  padding: 0;
}
</style>
